import React from 'react'
import {message, Modal,Tabs,Carousel} from "antd";
const {TabPane} = Tabs
import {WeaTools, WeaNewScroll, WeaLocaleProvider,WeaTable} from "ecCom";
const getLabel = WeaLocaleProvider.getLabel;
import Setting from "./setting";
class CompanyNews extends React.Component{

    state = {

        settingVisiable:false,
        tabId:0,
        data:{
            id:'',
            setting:{},
            items:[],
            eFieldNewDataSource:[]
        }

    }




    setStateData = (data)=>{
        this.setState(data)
    }


    componentWillMount(){
        this.onLoad()
    }


    onLoad = ()=>{
        const id = this.props.id
        const setting = {
            showNumber:5
        }

        WeaTools.callApi('/api/loginportal/element/getCompanyNewsData', 'GET', {"json":JSON.stringify({id:id,setting:JSON.stringify(setting)})}).then((result) => {
            if(result.status == true && result.data == null){
                WeaTools.callApi('/api/portal/customCompanyNews/saveOrFindCompanyNews', 'POST', {"json":JSON.stringify({id:id,setting:JSON.stringify(setting)})}).then((result) => {
                    if (result.status == true) {
                        let data = result.data
                        data.setting = JSON.parse(data.setting)
                        for(let i in data.eFieldNewDataSource){
                            data.eFieldNewDataSource[i].name = getLabel(data.eFieldNewDataSource[i].name, data.eFieldNewDataSource[i].name)
                        }
                        for(let i in data.items){

                            data.items[i].setting = JSON.parse(data.items[i].setting)
                        }
                        this.setState({
                            data
                        })
                    }
                });
            }else{
                if (result.status == true) {
                    let data = result.data
                    data.setting = JSON.parse(data.setting)
                    for(let i in data.eFieldNewDataSource){
                        data.eFieldNewDataSource[i].name = getLabel(data.eFieldNewDataSource[i].name, data.eFieldNewDataSource[i].name)
                    }
                    for(let i in data.items){

                        data.items[i].setting = JSON.parse(data.items[i].setting)
                    }
                    this.setState({
                        data
                    })
                }
            }
        })


    }


    tabsChange = (tabId)=>{
        this.setState({tabId})
    }

    hasIndex= (indexs ,index)=>{
        for(let i in indexs){
            if(indexs[i].dataIndex == index){
                return true
            }
        }
        return false
    }

    getColumns = ()=>{

    }


    render (){

        const {id} = this.props
        const {settingVisiable,data} = this.state
        const {items,eFieldNewDataSource}  = data
        for(let tabId in items){
            let columns = []
            let selectColumns = []
            let list = []
            let setting = {}
            let imgs = []
            if(data.items && data.items[tabId] && data.items[tabId].setting.eFieldNewUsedKeys){
                list = data.items[tabId].docs
                setting = data.items[tabId].setting
                selectColumns = data.items[tabId].setting.eFieldNewUsedKeys
                for(let i in list){
                    if(list[i].images.length ==1 && list[i].images[0] == "/images/homepage/noimgdefault_wev8.jpg"){

                    }else{
                        imgs.push({"img":list[i].images[0],"link":list[i].docsubject.link});
                    }
                }
                if(imgs.length == 0){
                    imgs.push({"img":"/images/homepage/noimgdefault_wev8.jpg","link":""})
                }
            }

            for(let i in selectColumns){
                for(let j in eFieldNewDataSource){
                    if(selectColumns[i] == eFieldNewDataSource[j].id){
                        if(eFieldNewDataSource[j].fieldColumn=='docsubject'){
                            columns.push({"dataIndex":eFieldNewDataSource[j].fieldColumn,"key":eFieldNewDataSource[j].fieldColumn,"render": (text) => <span style={{cursor:'pointer'}} onClick={()=>{window.open(text.link)}}>{text.name}</span>})
                        }if(eFieldNewDataSource[j].fieldColumn=='doccreater'){
                            columns.push({"dataIndex":eFieldNewDataSource[j].fieldColumn,"key":eFieldNewDataSource[j].fieldColumn,"render": (text) => <span>{text.name}</span>})
                        }else{
                            columns.push({"dataIndex":eFieldNewDataSource[j].fieldColumn,"key":eFieldNewDataSource[j].fieldColumn})
                        }

                    }
                }
            }

            items[tabId].columns = columns
            items[tabId].list = list
            items[tabId].imgs = imgs
        }





        const settings = {
            dots: true,
            infinite: true,
            speed: 500,
            slidesToShow: 1,
            slidesToScroll: 1,
            autoplay:true,
        };

        return (
            <div  style={{width:'100%',height:'100%',position:'relative' }} onMouseLeave={()=>{$(".lr_settingButtons_"+id).hide()}} onMouseEnter={()=>{$(".lr_settingButtons_"+id).show()}}>
                {
                    items.length == 1 ?
                        (
                            <div style={{width:'100%',height:'100%'}}>
                                {
                                    items.map((item,index)=>{
                                        return (
                                            <div>
                                                {
                                                    item.setting.showType == '1' ?
                                                        (
                                                            <WeaTable columns={item.columns} showHeader={false} pagination={false} dataSource={item.list} size="small"/>
                                                        ):''
                                                }
                                                {
                                                    item.setting.showType == '2' ?
                                                        (
                                                            <div>
                                                                <div  style={{width:item.setting.imgWidth+(item.setting.imgWidthType==1 ? "px":"%"),height:item.setting.imgHeight+(item.setting.imgHeightType==1 ? "px":"%"),float:"left"}}>
                                                                    {
                                                                        this.hasIndex(item.columns,"img")?
                                                                            (
                                                                                <Carousel {...settings}>
                                                                                    {
                                                                                        item.imgs.map((item2,index)=>{
                                                                                            return (
                                                                                                <img style={{cursor:'pointer',width:item.setting.imgWidth+(item.setting.imgWidthType==1 ? "px":"%"),height:(item.setting.autoHeight==0?(item.setting.imgHeight+(item.setting.imgHeightType==1 ? "px":"%")):("auto"))}} onClick={()=>{if(item2.link){window.open(item2.link)}}} src={item2.img}/>
                                                                                            )
                                                                                        })
                                                                                    }
                                                                                </Carousel>
                                                                            ):""
                                                                    }


                                                                </div>
                                                                <div style={{'margin-left':item.setting.imgWidth+(item.setting.imgWidthType==1 ? "px":"%")}}>
                                                                    <div style={{ 'margin-left':'5px'}}>
                                                                        <WeaTable columns={item.columns} showHeader={false} pagination={false} dataSource={item.list} size="small"/>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        ):''
                                                }
                                                {
                                                    item.setting.showType == '3' ?
                                                        (
                                                            item.docs.map((item2,index)=>{
                                                                return (
                                                                    <div style={{overflow:'hidden','margin-top':'10px'}}>
                                                                        <div style={{
                                                                            width: item.setting.imgWidth + (item.setting.imgWidthType == 1 ? "px" : "%"),
                                                                            height: item.setting.imgHeight + (item.setting.imgHeightType == 1 ? "px" : "%"),
                                                                            float: "left"
                                                                        }}>
                                                                            {
                                                                                this.hasIndex(item.columns,"img") ?
                                                                                    (
                                                                                        <Carousel {...settings}>
                                                                                            {
                                                                                                item2.images.map((item3, index) => {
                                                                                                    return (
                                                                                                        <img style={{
                                                                                                            cursor:'pointer',
                                                                                                            width: item.setting.imgWidth + (item.setting.imgWidthType == 1 ? "px" : "%"),
                                                                                                            height: (item.setting.autoHeight==0?(item.setting.imgHeight+(item.setting.imgHeightType==1 ? "px":"%")):("auto"))
                                                                                                        }} onClick={() => {
                                                                                                            window.open(item2.docsubject.link)
                                                                                                        }} src={item3}/>
                                                                                                    )
                                                                                                })
                                                                                            }
                                                                                        </Carousel>
                                                                                    ):""
                                                                            }

                                                                        </div>
                                                                        <div
                                                                            style={{'margin-left': item.setting.imgWidth+ (item.setting.imgWidthType == 1 ? "px" : "%")}}>
                                                                            <div style={{ 'margin-left':'5px'}}>
                                                                                {
                                                                                    this.hasIndex(item.columns,"docsubject") ?
                                                                                        <div style={{height:'40px','line-height':'40px'}}>
                                                                                            <span style={{cursor:'pointer'}} onClick={()=>{window.open(item2.docsubject.link)}}>{item2.docsubject.name}</span>
                                                                                        </div>
                                                                                        :""
                                                                                }

                                                                                <div style={{height:'40px','line-height':'40px'}}>
                                                                                    {
                                                                                        this.hasIndex(item.columns,"doccreater") ?
                                                                                            <span style={{"display":'inline-block','width':'70px'}}>{item2.doccreater.name}</span>
                                                                                            :""
                                                                                    }

                                                                                    {
                                                                                        this.hasIndex(item.columns,"doccreatedate") ?
                                                                                            <span style={{color:'rgb(153, 153, 153)','margin-right':'15px'}}>{item2.doccreatedate}</span>
                                                                                            :""
                                                                                    }
                                                                                    {
                                                                                        this.hasIndex(item.columns,"doccreatetime") ?
                                                                                            <span  style={{color:'rgb(153, 153, 153)'}}>{item2.doccreatetime}</span>
                                                                                            :""
                                                                                    }
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                )
                                                            })
                                                        ) : ""
                                                }
                                            </div>
                                        )
                                    })
                                }
                            </div>
                        ):(
                            <Tabs defaultActiveKey="0" >
                                {
                                    items.map((item,index)=>{
                                        return (
                                            <TabPane tab={item.setting.title} key={index}>
                                                {
                                                    item.setting.showType == '1' ?
                                                        (
                                                            <WeaTable columns={item.columns} showHeader={false} pagination={false} dataSource={item.list} size="small"/>
                                                        ):''
                                                }
                                                {
                                                    item.setting.showType == '2' ?
                                                        (
                                                            <div>
                                                                <div  style={{width:item.setting.imgWidth+(item.setting.imgWidthType==1 ? "px":"%"),height:item.setting.imgHeight+(item.setting.imgHeightType==1 ? "px":"%"),float:"left"}}>
                                                                    {
                                                                        this.hasIndex(item.columns,"img")?
                                                                            (
                                                                                <Carousel {...settings}>
                                                                                    {
                                                                                        item.imgs.map((item2,index)=>{
                                                                                            return (
                                                                                                <img style={{cursor:'pointer',width:item.setting.imgWidth+(item.setting.imgWidthType==1 ? "px":"%"),height:(item.setting.autoHeight==0?(item.setting.imgHeight+(item.setting.imgHeightType==1 ? "px":"%")):("auto"))}} onClick={()=>{if(item2.link){window.open(item2.link)}}} src={item2.img}/>
                                                                                            )
                                                                                        })
                                                                                    }
                                                                                </Carousel>
                                                                            ):""
                                                                    }


                                                                </div>
                                                                <div style={{'margin-left':item.setting.imgWidth+(item.setting.imgWidthType==1 ? "px":"%")}}>
                                                                    <div style={{ 'margin-left':'5px'}}>
                                                                        <WeaTable columns={item.columns} showHeader={false} pagination={false} dataSource={item.list} size="small"/>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        ):''
                                                }
                                                {
                                                    item.setting.showType == '3' ?
                                                        (
                                                            item.docs.map((item2,index)=>{
                                                                return (
                                                                    <div style={{overflow:'hidden','margin-top':'10px'}}>
                                                                        <div style={{
                                                                            width: item.setting.imgWidth + (item.setting.imgWidthType == 1 ? "px" : "%"),
                                                                            height: item.setting.imgHeight + (item.setting.imgHeightType == 1 ? "px" : "%"),
                                                                            float: "left"
                                                                        }}>
                                                                            {
                                                                                this.hasIndex(item.columns,"img") ?
                                                                                    (
                                                                                        <Carousel {...settings}>
                                                                                            {
                                                                                                item2.images.map((item3, index) => {
                                                                                                    return (
                                                                                                        <img style={{
                                                                                                            cursor:'pointer',
                                                                                                            width: item.setting.imgWidth + (item.setting.imgWidthType == 1 ? "px" : "%"),
                                                                                                            height: (item.setting.autoHeight==0?(item.setting.imgHeight+(item.setting.imgHeightType==1 ? "px":"%")):("auto"))
                                                                                                        }} onClick={() => {
                                                                                                            window.open(item2.docsubject.link)
                                                                                                        }} src={item3}/>
                                                                                                    )
                                                                                                })
                                                                                            }
                                                                                        </Carousel>
                                                                                    ):""
                                                                            }

                                                                        </div>
                                                                        <div
                                                                            style={{'margin-left': item.setting.imgWidth+ (item.setting.imgWidthType == 1 ? "px" : "%")}}>
                                                                            <div style={{ 'margin-left':'5px'}}>
                                                                                {
                                                                                    this.hasIndex(item.columns,"docsubject") ?
                                                                                        <div style={{height:'40px','line-height':'40px'}}>
                                                                                            <span style={{cursor:'pointer'}} onClick={()=>{window.open(item2.docsubject.link)}}>{item2.docsubject.name}</span>
                                                                                        </div>
                                                                                        :""
                                                                                }

                                                                                <div style={{height:'40px','line-height':'40px'}}>
                                                                                    {
                                                                                        this.hasIndex(item.columns,"doccreater") ?
                                                                                            <span style={{"display":'inline-block','width':'70px'}}>{item2.doccreater.name}</span>
                                                                                            :""
                                                                                    }

                                                                                    {
                                                                                        this.hasIndex(item.columns,"doccreatedate") ?
                                                                                            <span style={{color:'rgb(153, 153, 153)','margin-right':'15px'}}>{item2.doccreatedate}</span>
                                                                                            :""
                                                                                    }
                                                                                    {
                                                                                        this.hasIndex(item.columns,"doccreatetime") ?
                                                                                            <span  style={{color:'rgb(153, 153, 153)'}}>{item2.doccreatetime}</span>
                                                                                            :""
                                                                                    }
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                )
                                                            })
                                                        ) : ""
                                                }
                                            </TabPane>
                                        )
                                    })
                                }
                            </Tabs>
                        )
                }

                <Setting data={this.state.data} visiable={settingVisiable} setStateData={this.setStateData} onLoad={this.onLoad}></Setting>

                {
                    this.props.isSetting == true
                        ?(
                            <div className={"lr_settingButtons_"+id+" lr_settingButtons_class"} >
                                <span className="icon-coms-Flow-setting  lr_settingButtons_span_class"  onClick={() => {this.setState({settingVisiable:true}) }}></span>
                            </div>
                        ):""
                }
            </div>
        )
    }
}
export default CompanyNews